<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.11.5/css/layui.css" integrity="sha512-SGpnogj026QKlDY3yDe/KwNHdy9Q8pmtxE6h6orMo99teoUPxbLz+leANApR/hEohYxfRglQz0cx0AcWGXQXew==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.11.5/layui.js" integrity="sha512-oqZ/orzPk6WPklCkJNpTLRpTOpNNvgPM+MkvoGw2s3ZZV2bduXjUdY0k4eFIIksJ6dtv88c/vCq52VxPZGSWlA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="../js/pubilc.js"></script>
<style>
        /* body{
            padding-left: 200px;
           
        } */
        .div{
            width: 500px;
            height: 300px;
            background-color: #f5f5f5;
            padding: 20px;
            border-radius: 10px;
            margin-left: 1000px;
            display: none;
        }
        /* .xinniji{
             width: 500px;
            height: 300px;
            background-color: #f5f5f5;
            padding: 20px;
            border-radius: 10px;
            margin-left: 1000px;
            display: none;
        } */
        .table{
            width: 900px;
            margin-left: 100px;
            margin-top: 50px;
            
        }
        /* .btn{
             margin-left: 100px;
            margin-top: 50px;
        } */
        .chakan{
            width: 500px;
            height: 300px;
            background-color: #f5f5f5;
            padding: 20px;
            border-radius: 10px;
            margin-left: 1000px;
            display: none;
        }
        th{
            text-align: center;
        }
    </style>
</head>
<body>
    <button type="button" class="btn btn-primary" onclick="xin()" >新增角色</button>
    <table class="table table-striped text-center" >
    <thead >
        <tr>
            <th>序号</th>
            <th>角色名称</th>
            <th>职级</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody id="tbody">
    </tbody>
</table>
<div class="div">
    <span id="sp">新增</span>
    <div class="form-group">
        <label for="name">角色名称</label>
        <input type="text" class="form-control" id="name" placeholder="请输入角色名称">
    </div>
    <div class="form-group">
        <label for="level2">职级</label>
        <!-- <input type="text"  id="" placeholder="请输入等级"> -->
        <select name="" id="level" class="form-control">
           
        </select>
         <div class="form-group">
        <label for="name">负责班级</label>
        <input type="text" class="form-control" id="banji" placeholder="请输入班级名称">
    </div>
    </div>
    <button type="button" class="btn btn-primary btn-lg active"  onclick="add()">确定</button>
<button type="button" class="btn btn-default btn-lg active" onclick="onadd()" >取消</button>
  
</div>
<!-- <div class="xinniji">
    所属年级：<span class="sp2"></span><br>
     <label for="name">班级名称</label>
        <input type="text" class="form-control" id="name2" placeholder="请输入班级名称">
         <button type="button" class="btn btn-primary btn-lg active"  onclick="add2()">确定</button>
<button type="button" class="btn btn-default btn-lg active" onclick="onadd2()" >取消</button>
</div> -->
<div class="chakan">
    <div id="ID-tree-demo-showLine"></div>
    <button onclick="qwe()" style="margin-top: 150px;">取消</button>
</div>
<script>
var tbody = document.getElementById("tbody");
var div = document.getElementsByClassName('div')[0]

var data = [
    // {ban:'班主任',deng:'四级'},
    // {ban:'年级主任',deng:'三级'},
    // {ban:'教导主任',deng:'二级'}
]
var kly;
function xin(){
      name.value = ''
    level.value = ''
div.style.display = 'block'
kly=-1
xhr({
                    methods: 'get',
                    url: `/rankSys/getRank?school_id=${Number(sessionStorage.getItem('id'))}`,
                    success: function (res) {
                        console.log(res)
                        for(var i=0;i<res.length;i++){
                            level.innerHTML+=`<option value="${res[i].rank_id}">${res[i].rank_name}</option>`
                        }
                    }
                    })
}
function onadd(){
    div.style.display = 'none'
    // name.value = ''
   // level.value = ''
}
a()
function a(){
 xhr({
    methods:'post',
    url:`/roleSys/getRoleList`,
     data:JSON.stringify({
        role_school_id:Number(sessionStorage.getItem('id')),
     }),
    success:function(res){
    console.log(res)
    data.push(...res)
   var da = res
   console.log(da)
   tbody.innerHTML=''
    for(var i=0;i<da.length;i++){
         if(da[i].role_rank_id==2){
            da[i].role_rank_id='三级'
        }else if(da[i].role_rank_id==3){
            da[i].role_rank_id='二级'
        }else if(da[i].role_rank_id==4){
            da[i].role_rank_id='特级'
        }else if(da[i].role_rank_id==5){
            da[i].role_rank_id='一级'
        }
        tbody.innerHTML+=`<tr>
        <td>${da[i].role_id}</td>
        <td>${da[i].role_name}</td>
       
        <td>${da[i].role_rank_id}</td>
        <td>
            <span onclick="bian(${i})" class="btn btn-primary m-r-5">编辑</span>
             <span onclick="shan(${i})" class="btn btn-primary m-r-5">删除</span>
               <span onclick="cha(${i})" class="btn btn-primary m-r-5">权限</span>
          
        </td>
    </tr>`
    }
    }
})
    // tbody.innerHTML=''
    // for(var i=0;i<data.length;i++){
    //     tbody.innerHTML+=`<tr>
    //          <td>${i+1}</td>
    //     <td>${data[i].ban}</td>
    //     <td>${data[i].deng}</td>
    //     <td>
    //         <span onclick="bian(${i})">编辑</span>
    //          <span onclick="shan(${i})">删除</span>
    //            <span onclick="cha(${i})">权限</span>
          
    //     </td>
    // </tr>`
    // }
}
console.log(data)
function add(){
    
    var tr = document.createElement('tr')
    
 var name = document.getElementById('name');
 var level = document.getElementById('level');
    if(kly==-1){

 var asd2;
      xhr({
    methods:'get',
    url:`/gradeAndClass/getGradeAndClass?grade_school_id=${Number(sessionStorage.getItem('id'))}`,
    //  data:JSON.stringify({
    //  }),
    success:function(res){
    console.log(res)
    data.push(...res)
   var da = res
   console.log(da)
   for(var i=0;i<da.length;i++){
       for(j=0;j<da[i].gradeClasses.length;j++){
       console.log(da[i].gradeClasses[j].class_name)
       asd2 = da[i].gradeClasses[j].class_name

       }
    }


  var id= Number(sessionStorage.getItem('id'))
        xhr({
    methods:'post',
    url:'/roleSys/add',
    data:JSON.stringify({
        role_name:name.value,
       role_school_id:id,
       role_rank_id:level.value,
       role_class_ids:JSON.stringify([asd2])
    }),
    success:function(res){
        console.log(res);
          name.value=""
    level.value=""
    }

})
console.log(asd2)
console.log(id)
console.log(level.value)
console.log(name.value)

    }
    
})
       // data.push({ban:name.value,deng:level.value})
      

    }else if(kly>=0){
      
        // data[kly].ban = name.value
        // data[kly].deng = level.value
        console
        xhr({
            methods:'post',
            url:'/roleSys/update',
            data:JSON.stringify({
                role_id:data[kly].role_id,
                role_name:name.value,
               role_school_id:Number(sessionStorage.getItem('id')),
               role_rank_id:level.value,
               role_class_ids:[banji.value]
            }),
            success:function(res){
                console.log(res);
                name.value=""
    level.value=""
    banji.value=""
    a()

    }
        })
    }
    tbody.innerHTML=''
    onadd()
    a()
}
function bian(f){
    xhr({
                    methods: 'get',
                    url: `/rankSys/getRank?school_id=${Number(sessionStorage.getItem('id'))}`,
                    success: function (res) {
                        console.log(res)
                        
                        level.innerHTML=''
                        for(var i=0;i<res.length;i++){
                            
                            level.innerHTML+=`<option value="${res[i].rank_id}">${res[i].rank_name}</option>`
                        }
                    }
                    })
    var name = document.getElementById('name');
 var level = document.getElementById('level');
 var banji = document.getElementById('banji');
    sp.innerHTML = '编辑'
    div.style.display = 'block'
    kly=f
    name.value = data[f].role_name
    level.value = data[f].role_rank_id
    banji.value = data[f].role_class_ids
    
}
function shan(i){
    var userResponse = confirm("是否确认删除");
if (userResponse) {
data.splice(i, 1)
       tbody.innerHTML=''
       for(var i=0;i<data.length;i++){
        tbody.innerHTML+=`<tr>
             <td>${i+1}</td>
        <td>${data[i].ban}</td>
        <td>${data[i].deng}</td>
        <td>
            <span onclick="bian(${i})">编辑</span>
             <span onclick="shan(${i})">删除</span>
               <span onclick="cha(${i})">权限</span>
          
        </td>
    </tr>`
    }
} else {

}
     
}
var sp2 = document.getElementsByClassName('sp2')[0]
 var chakan  = document.getElementsByClassName('chakan')[0]
function cha(i){
   chakan.style.display ='block'
      var asd = data[i].ban
//  layui.use(function(){
//   var tree = layui.tree;
//   // 模拟数据

// var datae = [{title:`${asd}`,id:1,children:[{title:'南昌',id:1000}]}];
//   // 渲染  
// console.log('daf')
//   tree.render({
//     elem: '#ID-tree-demo-showLine',
//     data: datae,
//     showLine: false  // 是否开启连接线
    
//   });
//   return datae
// });
console.log(datae)
}

   function qwe(){
    chakan.style.display ='none'
   }
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
</body>
</html>